<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="web-home-banner">
    <el-carousel
      :interval="0"
      type="card"
      height="400px">
      <el-carousel-item
        v-for="(v, k) in dataArr"
        :key="k"
        class="banner-item">
        <div
          :style="bgImage(v.pic)"
          class="image w-image-fit"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts">
import BannerModel from '@/models/BannerModel'
import { Component , Vue, Inject } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import API from '@/api/apis'

@Component({})

export default class WWebHomeBanner extends Vue {
  @Inject()
  private bgImage!: (url: string, style?: CSSStyleDeclaration) => CSSStyleDeclaration

  // 图片数组对象
  private dataArr: BannerModel[] = []

  // 默认图片
  @Getter('defaultImage')
  private defaultImage!: string

  public mounted() {
    this.getAllBanners()
  }

  // 获取所有数据
  private getAllBanners() {
    BannerModel.loadAllModels(API.banner.all)
      .then((dataArr: any) => {
        this.dataArr = dataArr
      })
      .catch((err) => {
        console.log('err = ', err)
      })
  }
}

</script>

<style lang="scss" scoped>
.web-home-banner {
  .banner-item {
    .image {
      height: 100%;
    }
  }
}
</style>
